@import "../../../assets/iconfont/iconfont";
@import "../../styles/variables";

$left-width: 180px;
$shop-wrap-width: 344px;

// override container behavior
.cc-main-container cc-menu-bar.cc-side-container {
	overflow: visible;
	width: auto;
}

//店铺选择器
.shop-choose-wrapper {
	line-height: initial;
	text-indent: 1px;
	box-sizing: border-box;
	width: $shop-wrap-width;
	height: 100%;
	padding-top: 20px;
	background: #f9f9f9;
	border: 1px solid #e7eaec;
	box-shadow: 4px 4px 4px -3px rgba(0, 0, 0, 0.09);
	position: absolute;
	top: 0;
	right: -342px;
	z-index: -1;
	//overflow-y: auto;
	transform: translateX(-#{$shop-wrap-width});

	display: flex;
	flex-flow: column nowrap;

	//搜索框
	.shop-search {
		flex: 0 0 30px;
		width: 294px;
		height: 30px;
		position: relative;
		margin-left: 25px;
		input {
			box-sizing: border-box;
			font-size: 12px;
			width: 100%;
			height: 100%;
			border: 1px solid #d9d9d9;
			padding-left: 8px;
			padding-right: 55px;
		}
		//清除搜索框内容ICON
		.shop-search-clear {
			position: absolute;
			top: calc(50% - 6px);
			right: 34px;
			color: #d8d8d8;
			@extend .iconfont;
			@extend .icon-clear;
			font-size: 12px;
			cursor: pointer;
		}
		//搜索按钮
		.shop-search-icon {
			@extend .iconfont;
			@extend .icon-search;
			color: #dbdbdb;
			font-size: 18px;
			position: absolute;
			right: 9px;
			top: calc(50% - 9px);
			cursor: pointer;
			&.active {
				color: #666666;
			}
		}
		@-moz-document url-prefix() {
			.shop-search-icon {
				top: calc(50% - 10px);
			}
		}
	}
	.shop-info-wrapper {
		flex: auto;
		overflow-y: auto;
		margin-top: 20px;
		p {
			font-size: 12px;
			transform: scale(0.85);
			height: 14px;
			line-height: 14px;
			color: #999999;
		}
		ul {
			margin-bottom: 16px;
			li {
				height: 30px;
				line-height: 30px;
				font-size: 12px;
				padding-left: 25px;
				color: #666666;
				cursor: pointer;

				display: flex;
				flex-flow: row nowrap;

				&.active {
					background: #f0f0f0;
					span.checked {
						@extend .iconfont;
						@extend .icon-right;
						color: #23B74A;
						font-size: 16px;
						float: right;
						//margin-right: 18px;
						margin-top: 1px;
					}
				}
				.checked {
					flex: 0 0 40px;
				}
				.shop-name {
					flex: auto;
				}
				.text-overflow {
					display: inline-block;
					max-width: 277px;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
			}
		}

	}
	.shop-info-none {
		font-size: 14px;
		color: #999999;
		margin-top: 219px;
		text-align: center;
		line-height: 28px;
		display: none;
		a {
			cursor: pointer;
			color: #0083BA;
			&:hover {
				color: #00AAF1;
			}
		}
	}
	//店铺搜索无结果
	&.shop-choose-none {
		.shop-info-wrapper {
			display: none;
		}
		.shop-info-none {
			display: block;
		}
	}

	//店铺选择器出现出现动画
	&.shop-select-show {
		animation: shop-slide-show 0.5s ease;
		animation-fill-mode: forwards;
	}
	//店铺选择器消失动画
	&.shop-select-hide {
		animation: shop-slide-hide 0.3s ease;
		animation-fill-mode: forwards;
	}
}

//左菜单收起时店铺信息显示消失
.ccms-left {
	& .menu-shop-show {
		display: none;
	}
	& .shop-choose-wrapper {
		left: 30px;
	}
}

@keyframes shop-slide-show {
	from {
		transform: translateX(-#{$shop-wrap-width});
	}
	to {
		transform: translateX(0px);
	}
}

@keyframes shop-slide-hide {
	from {
		transform: translateX(0px);
	}
	to {
		transform: translateX(-#{$shop-wrap-width});
	}
}
